
<template>
  <div class="add-supervision-information-container" style="width:100%">
    <div class="my-form" style="width:100%;border-radius:4px">
      <div class="my-form-item">
        <div class="my-form-item-label">上课日期</div>
        <div class="my-form-item-content">
          <div>
            <span style="margin-left:20px;line-height: 37px;">{{ value1 }}</span>
            <!-- <el-date-picker
              v-model="value1"
              type="date"
              style="width: 161px"
              placeholder="选择日期"
            >
            </el-date-picker> -->
          </div>
          <div style="border-left:1px solid rgba(0, 76, 167, 0.39);border-right:1px solid rgba(0, 76, 167, 0.39)">上课教员
          </div>
          <div>
            <span style="margin-left:30px;line-height: 37px;">{{ teachername }}</span>
            <!-- <div @click="showManualEntryDialog = true">
              <img
                src="../../../assets/appraisal/icon-manual-entry.png"
                alt=""
              />
              <span>手动录入</span>
            </div> -->
          </div>
          <div style="border-left:1px solid rgba(0, 76, 167, 0.39);border-right:1px solid rgba(0, 76, 167, 0.39)">听查课人
          </div>
          <div>
            <span>{{ userName }}</span>
          </div>
          <!-- <div v-if="this.userId == '110520'">
                <InputItem
                :disabled="true"
                :value="userName"
                @input="
              (e) => {
                userName = e;
              }
              "
            ></InputItem>
          </div>
          <div v-else>
                <el-input
                style="margin-top:-18px;width:120px;border: 1px solid #004ca7;color: #004ca7; border-radius: 4px;"
              v-model="userNames"
              :disabled="true">
              </el-input>
          </div> -->
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">上课信息</div>
        <div class="my-form-item-content">

          <div v-for="(item, index) in tableData" :key="index">

            <span>课程名称： <span>{{ item.classesname }}</span></span>
            <!-- <span>上课教员： <span>{{ item.employee }}</span></span> -->
            <span>听课节次： <span>{{ item.empltkjs }}</span></span>
            <span>教学班： <span>{{ item.classes }}</span></span>
            <span>场地：<span>{{ item.place }}</span></span>
            <!-- <span>
              听课节次：
              <span>
                <el-select
                  style="width: 81px"
                  size="mini"
                  v-model="item.class_sessions"
                >
                  <el-option
                    v-for="items in item.class_sessions_list"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  >
                  </el-option>
                </el-select>
              </span>
            </span> -->
          </div>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">评价标准</div>

        <div class="my-form-item-content" :class="[titles.length % 2 == 0 ? 'LastItem' : '']">
          <ul>
            <li style="height: 55px">
              <span v-for="(title, index) in titles" :key="index" :style="{
                width:
                  index == 0
                    ? '473px'
                    : Math.ceil(945 / (titles.length - 1)) + 'px',
              }">{{ title }}</span>
            </li>
            <template v-for="(data, index) in subTitleser">
              <li style="height: 55px" :key="index + 33">
                <span style="width: 473px">{{ data.zbxmc }}</span>
                <span v-for="num in titles.length - 1" :key="num" :style="{
                  width: Math.ceil(945 / (titles.length - 1)) + 'px',
                }"></span>
              </li>
              <li style="height: 55px" v-for="(item, index) in data.evaluateBatchNormList" :key="index + 100">
                <span style="width: 473px">{{ item.zbxmc }} </span>
                <span v-for="num in titles.length - 1" :key="num" :style="{
                  width: Math.ceil(945 / (titles.length - 1)) + 'px',
                }">

                  <el-checkbox disabled v-model="item['checked' + num]" @change="sssa"></el-checkbox>
                </span>
              </li>
            </template>
          </ul>
        </div>

      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">评价等级</div>
        <div class="my-form-item-content">
          <div>
            <el-select size="mini" class="evaluate-level" style="width: 89px" :disabled="true"
              v-model="evaluation_grade" popper-class="add-supervision-information-green-popper">
              <el-option v-for="(item, index) in evaluation_grades" :key="index" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>评定分数</div>
          <span style="margin-left:30px">{{ evaluation_score }}</span>
          <!-- <el-form :rules="rules" ref="ruleForm" v-if="evaluation_grade == '优'">
            <el-form-item style="height:-20px"  prop="name">
            <el-input style="width: 110px" :disabled="true"
              v-model.number="evaluation_score"></el-input>
            </el-form-item>
          </el-form>
          <el-form :rules="rules" ref="ruleForm" v-if="evaluation_grade == '良'">
            <el-form-item style="height:-20px"  prop="namea">
            <el-input style="width: 110px" :disabled="true"
              v-model.number="evaluation_score"></el-input>
            </el-form-item>
          </el-form>
          <el-form :rules="rules" ref="ruleForm" v-if="evaluation_grade == '中'">
            <el-form-item style="height:-20px"  prop="names">
            <el-input style="width: 110px" :disabled="true"
              v-model.number="evaluation_score"></el-input>
            </el-form-item>
          </el-form>
          <el-form :rules="rules" ref="ruleForm" v-if="evaluation_grade == '差'">
            <el-form-item style="height:-20px"  prop="named">
            <el-input style="width: 110px" :disabled="true"
              v-model.number="evaluation_score"></el-input>
            </el-form-item>
          </el-form> -->
          <!-- <div>
            <el-input
              style="width: 110px"
              v-model="evaluation_score"
            ></el-input>
          </div> -->
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">专家评语</div>
        <div class="my-form-item-content">
          <div>
            <el-input type="textarea" :rows="4" :disabled="true" style="width: 458px" v-model="expert_reviews">
            </el-input>
          </div>
          <div>评语扫描件</div>
          <span style="margin-left:30px">{{ pysmj }}</span>
          <!-- <div>
            <span>{{pysmj}}</span>
          </div> -->
        </div>
      </div>
    </div>
    <div class="button-group">
      <!-- <div @click="saveGrouper">提交</div>
      <div @click="saveGroup">保存</div> -->
      <div @click="cback">取 消</div>
    </div>
    <!-- <el-dialog
      title="手动录入填写上课信息"
      :visible.sync="showManualEntryDialog"
      width="1185px"
      class="manual-entry-container"
    >
      <div>
        <el-row>
          <el-col :span="12">
            <div>课程名称</div>
            <div>
              <el-input
                v-model="classesname"
                style="width: 234px"
                placeholder="请输入课程名称"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div>上课教员</div>
            <div>
              <el-input v-model="teachername" style="width: 234px"></el-input>
            </div>
          </el-col>
          
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>听课节次</div>
            <div>
              <el-select style="width: 90px" v-model="listenclass">
                <el-option
                  v-for="(item, index) in class_frequencys"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div>教学班</div>
            <div>
              <el-input v-model="classes" style="width: 234px"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>场 地</div>
            <div>
              <el-input v-model="place" style="width: 234px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div></div>
            <div></div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <button @click="supervisionadd">保存</button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { userSaves, editGroup } from "@/api/teacher/admin";
import { addcourse, supervisionlist } from "@/api/teacher/supervision";
import InputItem from "../../../components/InputItem.vue";
import { TypeAdminId } from "@/api/userIdType"
export default {
  components: {
    InputItem,
  },
  name: "addsupervisioninformation",
  data() {
    // var checkAge = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('年龄不能为空'));
    //   }
    //   setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //       callback(new Error('请输入数字值'));
    //     } else {
    //       if (value < 18) {
    //         callback(new Error('必须年满18岁'));
    //       } else {
    //         callback();
    //       }
    //     }
    //   }, 1000);
    // };
    return {
      pysmj: '',
      id: "",
      userId: "",
      skxx: "",
      pcid: "",
      userName: "",
      userNames: "",
      baseInfo: "",
      tableData: [],
      titles: ["评价标准", "A", "B", "C"],
      subTitleser: [],
      checkboxList1: [],
      checkboxList2: [],
      checked: false,
      value1: '',
      expert_reviews: "",
      evaluation_score: "",
      evaluation_grade: "A",
      evaluation_grades: [
        { label: "A", value: "A" },
        { label: "B", value: "B" },
        { label: "C", value: "C" },
        { label: "D", value: "D" },
      ],
      class_sessions: "",
      class_sessions_list: [],
      // showManualEntryDialog: false,
      classesname: "",
      teachername: "",
      classes: "",
      place: "",
      jxb: "",
      listenclass: "",
      class_frequencys: [],
      rules: {
        // name: [

        //   { validator: checkAge, trigger: 'blur' }
        // ],
        // namea: [

        //   { validator: checkAge, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // names: [
        //   { required: true, message: '请输入70-79分以内分数！', trigger: 'blur' },
        //   { validator: checkAge, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // named: [
        //   { required: true, message: '请输入70分以下分数！', trigger: 'blur' },
        //   { validator: checkAge, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ]
      },
    };
  },
  created() {
    this.editGroup()
    // this.srcAbcd()
    //this.studentsupid()

    // this.userId = TypeAdminId()
    // this.userSaves()
  },
  methods: {
    handleCheckAllChange(val, it) {
      //it 获取当前行数据
      this.skxx = it
      console.log(this.skxx, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
      var _this = this;
      this.checking = true;
      this.tableData.forEach((item) => {
        item[it + "select"] = val;
      });

      //this.baseInfo[it + "isIndeterminate"] = false;
      window.setTimeout(function () {
        _this.checking = false;
      }, 500);
      this.$forceUpdate();
    },
    //手动录入上课信息
    supervisionadd: function () {
      let el = this
      let obj = {
        classesname: this.classesname,
        teachername: this.teachername,
        classes: this.classes,
        place: this.place,
        listenclass: this.listenclass,
        class_frequencys: this.class_frequencys
      }
      return new Promise(() => {
        addcourse(obj).then(res => {
          console.log("输出", res.data.data);
          // el.showManualEntryDialog = false
          console.log(res, 'res')
        })
      })
    },
    sssa() {
      let titles = this.titles;
      for (let k = 0; k < titles.length; k++) {
        for (let i = 0; i < this.subTitleser.length; i++) {
          for (let j = 0; j < this.subTitleser[i].evaluateBatchNormList.length; j++) {
            // this.subTitleser[i].evaluateBatchNormList[j]['checked' + k] = false;
            if (this.subTitleser[i].evaluateBatchNormList[j].result == titles[k]) {
              // console.log(k)
              this.subTitleser[i].evaluateBatchNormList[j]['checked' + k] = true;
            } else {
              // this.subTitleser[i].evaluateBatchNormList[j]['checked' + k] = false;
            }
          }
        }
      }
      console.log(this.subTitleser)
    },

    userSaves() {
      return new Promise(resolve => {
        userSaves().then((res) => {
          console.log(res.data, "111111111112")
        })
      })
    },


    //点击修改跳入
    editGroup() {
      this.id = this.$route.query.id
      let obj = {
        id: this.$route.query.id
      }
      return new Promise(resolve => {
        editGroup(obj).then((res) => {
          this.teachername = res.data.data.skjy
          this.value1 = res.data.data.skrq
          this.titles = res.data.data.bzdj
          this.userName = res.data.data.tckr;
          this.subTitleser = res.data.data.evaluateBatchNormVOList
          this.evaluation_grade = res.data.data.pjdj
          this.evaluation_score = res.data.data.pdfs
          this.expert_reviews = res.data.data.zjpy
          this.pcid = res.data.data.pcid;
          if (res.data.data.pysmj) {
            this.pysmj = res.data.data.pysmj.split(';')[1];
          }
          this.tableData = [
            {
              classesname: res.data.data.kcmc,
              employee: res.data.data.skjy,
              class_sessions: res.data.data.tkjc,
              classes: res.data.data.jxb,
              place: res.data.data.cd,
              empltkjs: res.data.data.tkjc
            }
          ]


          console.log('加载信息', res.data.data)
          this.sssa()
        })
      })
    },
    // sssa() {
    //   for (let i = 0; i < this.subTitleser.length; i++) {

    //     for (let j = 0; j < this.subTitleser[i].evaluateBatchNormList.length; j++) {
    //       if (this.subTitleser[i].evaluateBatchNormList[j].result == 'A') {
    //         this.subTitleser[i].evaluateBatchNormList[j].checked1 = true

    //       } else if (this.subTitleser[i].evaluateBatchNormList[j].result == 'B') {
    //         this.subTitleser[i].evaluateBatchNormList[j].checked2 = true

    //       } else if (this.subTitleser[i].evaluateBatchNormList[j].result == 'C') {
    //         this.subTitleser[i].evaluateBatchNormList[j].checked3 = true

    //       } else if (this.subTitleser[i].evaluateBatchNormList[j].result == 'D') {
    //         this.subTitleser[i].evaluateBatchNormList[j].checked4 = true

    //       }
    //     }
    //   }

    //   console.log(this.subTitleser)
    // },

    sssaClick(item, index) {
      let newS = '';
      for (let key in item) {
        console.log(item)
        if (key.includes('checked')) {
          if (key != 'checked' + index) {
            newS = key;
            item[newS] = false;
          }
        }
      }
      console.log(item[newS])
      console.log(newS)
      console.log(typeof item[newS])
      // delete item[newS]
      item['checked' + index] = true;
      item.result = this.titles[index];
    },
    cback(){
      if(this.$route.query.type && this.$route.query.type == 'teamA'){
        this.$router.push({
          path: "/teacher/appraisal/supervisioner", //要跳转的页面的路由
        });
      } else {
        this.$router.push({
          path: "/admin/appraisal/manage", //要跳转的页面的路由
        });
      }
    }

  }

};
</script>
<style lang="less" scoped>
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item,
.el-form-item {
  margin-bottom: 0px;
}

.add-supervision-information-container {
  .evaluate-level {
    .el-input__inner {
      border: 1px solid rgba(2, 200, 108, 1);
      color: rgba(2, 200, 108, 1);
      background: rgba(241, 255, 248, 1);

      .el-icon-arrow-up:before {
        content: "\E6E1";
      }
    }

    .el-select .el-input.is-focus .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }

    .el-select:focus .el-input__inner,
    .el-select:hover .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }

    .el-input .el-select__caret {
      color: rgba(2, 200, 108, 1);
    }

    .el-select-dropdown__item.selected {
      color: rgba(2, 200, 108, 1);
    }

    .el-input.is-focus .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }
  }

  .el-textarea__inner {
    resize: none;
  }

  .manual-entry-container {
    .el-dialog__body {
      >div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;

        >div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);

          &:last-child {
            border-bottom: none;
          }

          >div {
            display: flex;

            >div {
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:nth-child(1) {
                width: 220px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }

              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 43px;
    }

    .dialog-footer {

      >button {
        width: 87px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
        margin-right: 0px !important;
      }
    }
  }
}

.add-supervision-information-green-popper {
  .el-select-dropdown__item {
    color: rgba(2, 200, 108, 1);
  }

  .el-select-dropdown__item.selected {
    color: rgba(2, 200, 108, 1);
    font-weight: 700;
  }
}
</style>
<style scoped lang="less">
.add-supervision-information-container {
  .my-form {
    width: 1737px;

    border: 1px solid rgba(0, 76, 167, 0.8);
    // margin: 57px auto 19px;

    .my-form-item {
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);

      >div {
        display: table-cell;
        min-height: 54px;
        vertical-align: middle;
      }

      .my-form-item-label {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        background: rgba(77, 129, 192, 0.1);
        width: 239px;
        text-align: center;
      }

      .my-form-item-content {
        // width: 1497px;
        font-size: 14px;
        color: #004ca7;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }

      &:nth-child(1) {
        .my-form-item-content {
          >div {
            height: 69px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;

            &:nth-child(1) {
              width: 384px;
              padding-left: 10px;
              padding-top: 15px;
            }

            &:nth-child(2) {
              width: 240px;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
              text-align: center;
            }

            &:nth-child(3) {
              width: 303px;
              padding-top: 15px;

              >div {
                display: inline-block;

                &:nth-child(1) {
                  width: 110px;
                  height: 39px;
                  border: 1px solid #004ca7;
                  display: inline-block;
                  border-radius: 4px;
                  padding: 10px 0 0 34px;
                  margin: 0 37px 0 15px;
                }

                &:nth-child(2) {
                  width: 120px;
                  height: 27px;
                  background: #fff6ef;
                  border: 1px solid #f3b815;
                  border-radius: 4px;
                  padding: 1px 15px;
                  color: rgba(243, 184, 21, 1);
                  font-size: 16px;
                  cursor: pointer;

                  >img {
                    width: 15px;
                    height: 15px;
                    margin-right: 8px;
                    vertical-align: -2px;
                  }
                }
              }
            }

            &:nth-child(4) {
              width: 240px;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
              text-align: center;
            }

            &:nth-child(5) {
              padding-left: 20px;
            }
          }
        }
      }

      &:nth-child(2) {
        .my-form-item-content {
          >div {
            height: 56px;
            vertical-align: middle;
            padding-top: 10px;
            padding-left: 30px;

            >span {
              font-size: 16px;
              font-weight: bold;
              line-height: 39px;
              margin-right: 86px;
              color: #004ca7;

              >span {
                font-weight: 400;
              }
            }
          }
        }
      }

      &:nth-child(3) {
        .my-form-item-content {
          >ul {
            list-style: none;

            >li {
              border-bottom: 1px solid rgba(0, 76, 167, 0.39);

              &:nth-child(1) {
                background: rgba(77, 129, 192, 0.1);

                >span {
                  font-weight: bold;
                }
              }

              &:last-child {
                border-bottom: none;
              }

              >span {
                display: inline-block;
                height: 55px;
                text-align: center;
                padding-top: 18px;
                width: 233px;
                vertical-align: middle;

                &:nth-child(1) {
                  width: 473px;
                }

                &:nth-child(2) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }

                &:nth-child(4) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }
              }
            }
          }
        }
      }

      &:nth-child(4) {
        .my-form-item-content {
          >div {
            height: 76px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;

            &:nth-child(1) {
              width: 630px;
              padding-left: 30px;
            }

            &:nth-child(2) {
              width: 240px;
              background: rgba(77, 129, 192, 0.1);
              border-left: 1px solid rgba(0, 76, 167, 0.39);
              border-right: 1px solid rgba(0, 76, 167, 0.39);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
            }

            &:nth-child(3) {
              width: 625px;
              padding-left: 21px;
            }
          }
        }
      }

      &:nth-child(5) {
        .my-form-item-content {
          >div {
            height: 116px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;

            &:nth-child(1) {
              width: 630px;
              padding-left: 30px;
              padding-top: 10px;
            }

            &:nth-child(2) {
              width: 240px;
              background: rgba(77, 129, 192, 0.1);
              border-left: 1px solid rgba(0, 76, 167, 0.39);
              border-right: 1px solid rgba(0, 76, 167, 0.39);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              padding-top: 45px;
            }

            &:nth-child(3) {
              // width: 625px;
              padding-left: 21px;
              padding-top: 42px;

              >span {
                display: inline-block;
                background: #ebe6ff;
                border: 1px solid #5230e9;
                border-radius: 4px;
                font-size: 16px;
                font-weight: 400;
                color: #5230e9;
                padding: 3px 17px;
              }
            }
          }
        }
      }
    }
  }

  .button-group {
    cursor: pointer;
    width: 915px;
    margin: 30px auto;
    text-align: center;

    >div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: rgba(81, 174, 246, 1);
        border: 1px solid rgba(81, 174, 246, 1);
        background: rgba(241, 248, 254, 1);
      }

      &:nth-child(2) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin: 0 100px;
      }

      &:nth-child(3) {
        color: rgba(250, 83, 57, 1);
        border: 1px solid rgba(250, 83, 57, 1);
        background: rgba(255, 239, 239, 1);
      }
    }
  }
}
</style>

<style lang="less" scoped>
.el-form-item {
  ::v-deep .el-form-item__content {
    // position: absolute;
    margin-left: 900px;
    margin-top: -60px;
  }
}
</style>
